<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="box">

        这是一个div标签

        <span>
            这是一个span标签
        </span>
    </div>

</body>


<script>
    /* 获取标签内部内容的属性
    1.获取标签内部内容的属性有两个:innerHTML和innerText
    2.innerHTML属性,在获取标签内部内容时,如果包含标签,获取的内容会包含标签,获取的内容包括空白换行等
    3.innerText属性,在获取标签内部内容时,如果包含标签,获取的内容会过滤标签,获取的内容会去掉换行和缩进等空白
     */


    /* 更改标签内容
     
    1.innerHTML 设置属性值 有标签的字符串 会按照HTML语法中的标签加载
    2.innerText 设置属性值 有标签的字符串 会按照普通的字符加载  

    对比使用场景:
    1.innerText 在设置纯字符串的时候使用
    2.innerHTML 在设置有内部子标签结构时使用
     */


    var box = document.getElementById("box")
    console.log(box.innerHTML)
</script>

</html>